import React, { useEffect } from "react";
import { Breadcrumb } from "antd";
import "./index.less";

// 引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";

const Index = () => {
  useEffect(() => {
    let map;

    // window._AMapSecurityConfig = {
    //   securityJsCode: "311f534fcd60bb6da11cf51ce2d57716",
    // };

    AMapLoader.load({
      key: "8f961d3aa017ac1c4069ce032c92f4eb", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Driving"],
    })
      .then((AMap) => {
        // 可以接受第二个参数（描述对象）
        map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          viewMode: "2D", // 默认使用 2D 模式
          zoom: 13, //初始化地图层级 0-20 3-20
          center: [121.499718, 31.239703], //初始化地图中心点
          mapStyle: "amap://styles/fresh", //设置地图的显示样式
        });
        console.log(map);

        // complete是一个生命周期，在地图加载完成以后执行
        map.on("complete", function () {
          // 地图图块加载完成后触发
          console.log("地图创建完成了");
          // var position = new AMap.LngLat(116, 39); // 标准写法
          // // 简写 var position = [116, 39];
          // map.setCenter(position);
        });

        // 添加地图插件
        // 添加缩放按钮
        AMap.plugin("AMap.ToolBar", function () {
          //异步加载插件
          var toolbar = new AMap.ToolBar();
          map.addControl(toolbar);
        });
        // 添加比例尺
        AMap.plugin("AMap.Scale", function () {
          //异步加载插件
          var scale = new AMap.Scale();
          map.addControl(scale);
        });

        // 给地图添加事件
        map.on("click", (ev) => {
          console.log(ev);
          // map.setCenter([116, 39]);
          const marker = new AMap.Marker({
            position: [ev.lnglat.lng, ev.lnglat.lat],
          });
          map.add(marker);
        });
        // map.on("moveend", () => {
        //   console.log("移动结束了");
        // });

        // 创建一个 Marker 实例：
        const marker = new AMap.Marker({
          position: [121.499718, 31.239703], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "东方明珠塔",
        });
        const marker2 = new AMap.Marker({
          position: [121.475342, 31.228709], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: "上海博物馆",
          icon: "https://vdata.amap.com/icons/b18/1/2.png",
          offset: new AMap.Pixel(-10, -10),
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add([marker, marker2]);

        marker.on("click", () => {
          console.log("东方明珠塔被点击了");
          map.remove(marker);
        });

        // 添加线段
        var polyline = new AMap.Polyline({
          path: [
            [121.499718, 31.239703],
            [121.475342, 31.228709],
            [121.402214, 31.262611],
            [121.499718, 31.239703],
          ],
          borderWeight: 5, // 线条宽度，默认为 1
          strokeColor: "red", // 线条颜色
          lineJoin: "round", // 折线拐点连接处样式
        });
        map.add(polyline);

        // 添加圆形图
        // 创建圆形 Circle实例
        var circle = new AMap.Circle({
          center: [121.499718, 31.239703], //圆心
          radius: 1000, //半径
          borderWeight: 3,
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 6,
          fillOpacity: 0.4,
          strokeStyle: "solid",
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: "#1791fc",
          zIndex: 50,
        });
        map.add(circle);

        // 创建矩形 Rectangle 实例
        // var rectangle = new AMap.Rectangle({
        //   bounds: [
        //     [121.402214, 31.262611],
        //     [121.499718, 31.239703],
        //   ],
        //   strokeColor: "red",
        //   strokeWeight: 6,
        //   strokeOpacity: 0.5,
        //   strokeDasharray: [30, 10],
        //   // strokeStyle还支持 solid
        //   strokeStyle: "dashed",
        //   fillColor: "blue",
        //   fillOpacity: 0.5,
        //   cursor: "pointer",
        //   zIndex: 50,
        // });
        // map.add(rectangle);

        // 卫星图层
        // var layer1 = new AMap.TileLayer.RoadNet();
        // map.add(layer1);

        // 信息窗体的内容
        // var content = [
        //   "电话 : 010-84107000   邮编 : 100102",
        //   "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>",
        // ];

        // // 创建 infoWindow 实例
        // var infoWindow = new AMap.InfoWindow({
        //   content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
        // });

        // // 打开信息窗体
        // infoWindow.open(map);

        //构造路线导航类

        AMap.plugin("AMap.Driving", function () {
          var driving = new AMap.Driving({
            // map: map,
            // panel: "panel",
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
            policy: AMap.DrivingPolicy.LEAST_TIME,
          });

          var startLngLat = [121.499718, 31.239703];
          var endLngLat = [121.334065, 31.195089];

          driving.search(startLngLat, endLngLat, function (status, result) {
            // 未出错时，result即是对应的路线规划方案
            console.log(result);
          });
        });
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });

    return () => {
      // 页面销毁的时候需要去销毁地图实例
      map.destroy();
    };
  }, []);

  return (
    <div>
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "高德地图",
          },
        ]}
      />

      {/* 需要一个地图的容器 */}
      <div id="mapContainer"></div>
    </div>
  );
};

export default Index;
